<template>
    <div id="app">
       <h2 class="title">图片循环切换</h2>
       <!-- 显示图片 -->
       <!-- 动态渲染图片 -->
       <!-- <img :src="ccf" alt=""> -->
       <img :src="tpk[index]" alt="">
       <p>
         <!-- 点击上一张按钮，显示上一张图片，如果是第一张则显示最后一张 -->
         <button @click="edd">上一张</button>
         <!-- 点击下一张按钮，显示下一张图片，如果是最后一张则显示第一张 -->
         <button @click="add">下一张</button>
       </p>
  </div>
</template>
<script setup>
// 结构
import { ref } from "vue";
// 创建图片数组
const tpk=ref([
require('../assets/1.jpg'),
require('../assets/2.jpg'),
require('../assets/3.jpg'),
require('../assets/4.jpg'),
require('../assets/5.jpg')
  ]
    )
//图片数组下标 
const index=ref(0)
// 上一张
const edd=()=>{
  index.value++
  if(index.value>tpk.value.length-1){
    index.value=0
  }
}
// 下一张
const add=()=>{
  index.value--
  if(index.value<0){
    index.value=tpk.value.length-1
  }
}

</script>

<style lang="scss" scoped>
    #app {
      width: 100%;
      margin: 50px auto;
      text-align: center;
    }

    .title {
      color: #333;
    }

    img {
      height: 500px;
      box-shadow: 0 0 20px #ccc;
    }

    button {
      margin: 20px 5px 0;
      border-radius: 3px;
      cursor: pointer;
      border: none;
      padding: 5px 10px;
    }

    button:hover {
      color: green;
    }
</style>